import React from 'react'
import PropTypes from 'prop-types'
import { Form, Input, Modal, Select, Radio, TreeSelect } from 'antd'
import { IconList } from 'components'
import { permissionsTypeData } from 'utils/seletLocalData'
import { menuVisible } from 'enums'

const FormItem = Form.Item
const Option = Select.Option
const RadioGroup = Radio.Group

const formItemLayout = {
  labelCol: {
    span: 6,
  },
  wrapperCol: {
    span: 14,
  },
}

const modal = ({
  permissionsList,
  item = {},
  onOk,
  form: {
    getFieldDecorator,
    validateFields,
    getFieldsValue,
  },
  ...modalProps
}) => {
  const value = getFieldsValue()
  const handleOk = () => {
    validateFields((errors) => {
      if (errors) {
        return
      }
      const data = {
        ...value,
        id: item.id,
        parentId: value.bpid,
      }
      // 如果设定为不可见则修改mpid的值
      if (data.visible === menuVisible.unVisible) {
        data.mpid = -1
      } else {
        data.mpid = data.bpid
      }
      // data.address = data.address.join(' ')
      onOk(data)
    })
  }

  const modalOpts = {
    ...modalProps,
    onOk: handleOk,
  }
  let bpidList = [{
    value: 0,
    title: 'No Parent',
  }].concat(permissionsList)

  const typeData = permissionsTypeData.map(d => <Option key={d.key}>{d.value}</Option>)
  // bpid为父节点  mpid一般为父节点如果不显示则为-1
  return (
    <Modal {...modalOpts}>
      <Form layout="horizontal">
        <FormItem label="Parent" hasFeedback {...formItemLayout}>
          {getFieldDecorator('bpid', {
            initialValue: item.bpid || 0,
            rules: [
              {
                required: true,
              },
              {
                validator: (rule, value, callback) => {
                  if(item.id && value === item.id) {
                    callback(new Error('Can not choose itself'))
                  }
                  callback()
                }
              }
            ],
          })(<TreeSelect treeData={bpidList} placeholder="The Frist Level Menu should be 0 " />)}
        </FormItem>
        <FormItem label="Name" hasFeedback {...formItemLayout}>
          {getFieldDecorator('name', {
            initialValue: item.name,
            rules: [
              {
                required: true,
                max: 255,
              },
            ],
          })(<Input />)}
        </FormItem>

        <FormItem label="Route" hasFeedback {...formItemLayout}>
          {getFieldDecorator('route', {
            initialValue: item.route,
            rules: [
              {
                required: true,
                max: 255,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="Icon" hasFeedback {...formItemLayout}>
          {getFieldDecorator('icon', {
            initialValue: item.icon,
          })(<IconList />)}
        </FormItem>
        <FormItem label="Permissions" hasFeedback {...formItemLayout}>
          {getFieldDecorator('permission', {
            initialValue: item.id ? item.id.toString() : '',
            // rules: [
            //   {
            //     required: true,
            //     max: 255,
            //   },
            // ],
          })(<Input disabled />)}
        </FormItem>
        <FormItem label="Sort" hasFeedback {...formItemLayout}>
          {getFieldDecorator('sort', {
            initialValue: item.sort,
            rules: [
              {
                required: true,
              },
            ],
          })(<Input />)}
        </FormItem>
        <FormItem label="Type" hasFeedback {...formItemLayout}>
          {getFieldDecorator('type', {
            initialValue: item.type,
            rules: [
              {
                required: true,
              },
            ],
          })(<Select style={{ width: '100%' }}>{typeData}</Select>)}
        </FormItem>
        <FormItem label="Visible" hasFeedback {...formItemLayout}>
          {getFieldDecorator('visible', {
            initialValue: item.visible,
            rules: [
              {
                required: true,
              },
            ],
          })(<RadioGroup ><Radio value={menuVisible.unVisible}>unVisible</Radio><Radio value={menuVisible.visible}>Visible</Radio></RadioGroup>)}
        </FormItem>
      </Form>
    </Modal>
  )
}

modal.propTypes = {
  form: PropTypes.object.isRequired,
  type: PropTypes.string,
  item: PropTypes.object,
  onOk: PropTypes.func
}

export default Form.create()(modal)
